<!-- 通用资源页面 -->
<template>
  <div class="resource">
    <search-bar></search-bar>
    <nav-bar></nav-bar>
    <div class="page-main clearfix">
      <div class="page-left">
        <div class="xyd-container">
          <div class="xyd-c-title">资源目录</div>
          <div class="xyd-c-content">
            <el-tree
              v-if="sideCategory && sideCategory.length !== 0"
              :data="sideCategory"
              :highlight-current="true"
              :load="loadNode"
              :props="props"
              lazy
              @node-click="handleNodeClick">
            </el-tree>
          </div>
        </div>
        <small-carousel :data="banners"></small-carousel>
      </div>
      <div class="page-right">
        <div class="xyd-container">
          <div class="xyd-c-title clearfix">
            <span class="num">共找到{{total}}个资源</span>
            <span class="select">
              <label>资源级别：</label>
              <el-radio-group v-model="radio1" @change="handleChange1">
                <el-radio-button :label="item.name" v-for="item,i in level" :key="i"></el-radio-button>
              </el-radio-group>
            </span>
            <span class="btn-group">
              <button class="yellow-btn" @click="goCustomized">我要定制</button>
              <button class="orange-btn" @click="goUpload">我要上传</button>
            </span>
          </div>
          <div class="xyd-c-content" v-loading.body="loading">
            <no-content v-if="!loading && (!source || source.length === 0)" ></no-content>
            <ul v-if="source && source.length !== 0">
              <li v-for="item,i in source" :key="i">
                <resource-item :value="item"></resource-item>
              </li>
            </ul>
            <div class="pagination-container">
              <el-pagination
                v-if="source && source.length !== 0"
                :page-size="offset"
                layout="total, prev, pager, next"
                :total="total"
                @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getSource } from 'api/resource'
  import { NavBar, SearchBar } from 'views/layout'
  import Adv from 'views/components/adv'
  import ResourceItem from 'views/components/resourceItem'
  import SmallCarousel from 'views/components/smallCarousel'
  import { XydSpin, NoContent } from 'components/Sit'
  export default {
    name: 'Listen',
    components: {
      NavBar,
      SearchBar,
      Adv,
      ResourceItem,
      XydSpin,
      NoContent,
      SmallCarousel
    },
    data() {
      return {
        loading: false,
        radio1: '全部',
        sideCategory: [],
        banners: [],
        level: [{ name: '全部' }],
        source: [],
        total: 0,
        page: 1,
        offset: 10,
        props: {
          label: 'name',
          children: 'child'
        },
        route: {}
      }
    },
    created() {
      this.loading = true
      this.$store.dispatch('GetTopId', this.$route.name)
      .then(id => {
        this.catid = id
        getSource({
          catid: id,
          page: 1,
          offset: 10
        })
        .then(res => {
          console.log(res)
          this.loading = false
          this.total = res.count
          this.sideCategory = res.child
          this.level = [{ name: '全部' }].concat(res.level)
          this.source = res.source
          this.banners = res.banners
        })
        .catch(res => {
          console.log(res)
          this.loading = false
        })
      })
      .catch(err => {
        console.log(res)
        this.loading = false
      })
    },
    methods: {
      // 获取
      fetchData(params = {}) {
        this.loading = true
        getSource({
          catid: this.catid,
          slevel: this.slevel,
          page: this.page,
          offset: this.offset,
          ...params
        })
        .then(res => {
          this.loading = false
          this.total = res.count
          this.source = res.source
        })
        .catch(() => {
          this.loading = false
        })
      },
      handleChange1(a) {
        const slevel = this.level.filter(v => v.name === a)[0].value
        this.slevel = slevel
        this.fetchData({ slevel })
      },
      // 左侧筛选
      handleNodeClick(data) {
        this.catid = data.id
        this.fetchData({ catid: data.id })
      },
      // 左侧筛选获取下一级
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve(this.sideCategory)
        } else {
          getSource({
            catid: node.data.id
          })
          .then(res => {
            resolve(res.child)
          })
          .catch(err => console.log(err))
        }
      },
      handlePageChange(page) {
        this.page = page
        this.fetchData(page)
      },
      // 去定制
      goCustomized() {
        this.$router.push('/customized')
      },
      // 去上传
      goUpload() {
        this.$router.push('/upload')
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.resource{
  .page-main{
    .page-left{
      .xyd-container{
        .xyd-c-content{
          >ul{
            padding: 15px;
            >li{
              width: 100px;
              margin: 0 auto;
            }
          }
        }
      }
    }
    .page-right{
      .xyd-container{
        .xyd-c-title{
          padding: 0 20px;
          .num{
            float: left;
          }
          .select{
            float: left;
            margin-left: 100px;
            >label{
              vertical-align: middle;
            }
          }
          .btn-group{
            float: right;
            padding: 11px 0;
            line-height: 30px;
            .yellow-btn{
              height: 30px;
              font-size: 14px;
              width: 100px;
            }
            .orange-btn{
              height: 30px;
              font-size: 14px;
              width: 100px;
            }
          }
        }
        .xyd-c-content{
          padding: 0 40px;
          min-height: 350px;
        }
      }
    }
  }
}
</style>
